<template>
    <el-form ref="form" :model="forms" :rules="rules">
        <el-form-item prop="qqEmail">
            <el-input v-model="forms.qqEmail" placeholder="请输入要绑定的 QQ 邮箱" prefix-icon="el-icon-message"></el-input>
        </el-form-item>
        <el-form-item prop="captcha">
            <div style="display: flex; align-items: center">
                <el-input v-model="forms.captcha" placeholder="6 位邮箱验证码" style="margin-right: 10px"
                    prefix-icon="el-icon-chat-line-square"></el-input>
                <GetMailCaptchaButton :qqEmail="forms.qqEmail"></GetMailCaptchaButton>
            </div>
        </el-form-item>
    </el-form>
</template>

<script>
import GetMailCaptchaButton from "@/components/GetMailCaptchaButton.vue";
import { validateCaptcha, validateEmail } from "@/utils/validate";

export default {
    name: "Update",
    props: {
        form: {
            type: String,
            required: true
        }
    },
    components: { GetMailCaptchaButton },
    data() {
        return {
            forms: JSON.parse(this.form),
            rules: {
                qqEmail: [{ required: true, trigger: 'blur', validator: validateEmail }],
                captcha: [{ required: true, trigger: 'blur', validator: validateCaptcha }]
            }
        }
    },
}
</script>

<style scoped></style>
